<template>
 <view class="tn-flex tn-flex-wrap tn-margin-left-sm tn-margin-bottom-sm tn-margin-right-sm tn-margin-top-xs">
		
		<block v-for="(item, tieziliindex) in list" :key="tieziliindex">
 <view class="" style="width: 50%;" @click="navigateToFn({ url: '/circlePages/blogger_other?id='+item.id, checkLogin: false })">
          <view class="tn-blogger-content__wrap">
            <view class="image-picbook" style="position: relative;">
              <view class="image-book" >
				  <image :src="item.avatar" style="width: 100%;height: 150px;border-radius: 7px;" mode="aspectFill"></image>
              </view>
			  
			  <view class="tn-round " style="padding:5px 15px;
			  position: absolute;
			  top: 8px;
			  color: #000000;
			  font-size: 14px;   background: rgba(255, 255, 0, 0.4);" v-if="item.distance">
			  {{item.distance}}km
			   </view>
			  
			  <view style="
    position: absolute;
    bottom: 10px;
    font-size: 14px;    background: rgba(0,0,0,.3);width: 100%;transform: unset;">
			  <view class=" tn-text-justify  tn-text-ellipsis-2 tn-color-white" style="padding: 2px 10px;">
			   <text class=" ">{{item.city}}</text>
			  <text class="dk-lv tn-main-gradient-indigo--light " v-if="item.vip==0&&configInfo.is_lv">LV {{item.lv}}</text>
			  <text class="dk-vip tn-main-gradient-orangeyellow" v-if="item.vip==1"><text class="tn-icon-vip tn-color-black"
			  		style="font-size: 14px;margin-left: -5px;"></text>VIP{{item.vip_lv}}</text> 
			  </view>
			  <view class="  tn-text-justify tn-text-ellipsis-2 "  style="padding: 2px 10px;">
			    <text class="tn-blogger-content__label__desc tn-color-white tn-text-bold">{{ item.nickname }}</text> 
			     <text class="tn-icon-sex-female tn-color-purplered tn-text-xxl" v-if="item.sex==2"></text>
			     <text class="tn-icon-sex-male  tn-color-blue tn-text-xxl" v-if="item.sex==1"></text>
			     <text class="tn-icon-sex  tn-color-black tn-text-xxl" v-if="item.sex==0"></text>
			  </view>
			   </view> 
			  
			  
			  
            </view> 
			
          
        
            
            
          </view>
        </view>
			
		</block>
	</view>



</template>

<script>
	const audioContext = uni.createInnerAudioContext()

	export default {
		props: ['list', 'index'],
		created() {
			uni.$on('onlist_change', data => {				
				this.ondianzan(data)
			});
		},
		data() {
			return {
				noClick: true,
				videoPlay: false,
				isplay: false,
				//	body: this.item.content.replace(/<br>/g, "\n").replace(/<p>/g, "").replace(/<\/p>/g, "\n")
			}
		},
	

		methods: {

	



		}
	};
</script>


<style scoped lang="scss">
	.tn-blogger-content {
	  &__wrap {
	    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	    border-radius: 20rpx;
	    margin: 15rpx;
	  }
	  
	  &__info {
	    &__btn {
	      margin-right: -12rpx;
	      opacity: 0.5;
	    }
	  }
	  
	  &__label {
	    &__item {
	      line-height: 45rpx;
	      padding: 0 10rpx;
	      margin: 5rpx 18rpx 0 0;
	      
	      &--prefix {
	        color: #E83A30;
	        padding-right: 10rpx;
	      }
	    }
	    
	    &__desc {
	      line-height: 35rpx;
	    }
	  }
	  
	  &__main-image {
	    border-radius: 16rpx 16rpx 0 0;
	    
	    &--1 {
	      max-width: 690rpx;
	      min-width: 690rpx;
	      max-height: 400rpx;
	      min-height: 400rpx;
	    }
	    
	    &--2 {
	      max-width: 260rpx;
	      max-height: 260rpx;
	    }
	    
	    &--3 {
	      height: 212rpx;
	      width: 100%;
	    }
	  }
	  
	  &__count-icon {
	    font-size: 24rpx;
	    padding-right: 5rpx;
	  }
	}
	
	.image-book{
	  padding: 10rpx 0rpx;
	  font-size: 16rpx;
	  font-weight: 300;
	  position: relative;
	}
	.image-picbook{
	  background-size: cover;
	  background-repeat:no-repeat;
	  // background-attachment:fixed;
	  background-position:top;
	  border-radius: 15rpx 15rpx 0 0;
	}
</style>
